<template>
  <div class="g-container" style="height: 100%;padding: 20px;">
    <div :id="uniqueID" style="height: 100%;margin-top: 1%;" />
  </div>
</template>

<script>
import echarts from 'echarts'
import uuidv1 from 'uuid/v1'

import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'ZhengqiGongnuan',
  mixins: [defaultmixins],
  data() {
    return {
      uniqueID: ''
    }
  },
  created() {
    this.uniqueID = uuidv1()
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID))
    var scale = this.$root.setting.scale

    var option = {
      tooltip: {},
      grid: {
        top: '8%',
        left: '1%',
        right: '1%',
        bottom: '8%',
        containLabel: true
      },
      legend: {
        itemGap: 50,
        data: [{
          name: '蒸汽',
          textStyle: {
            color: '#FFFD9B',
            fontSize: 24 * scale
          }
        }, {
          name: '负荷',
          icon: 'circle',
          textStyle: {
            color: '#4FC7FF',
            fontSize: 24 * scale
          }
        }],
        right: 0
      },
      xAxis: [{
        type: 'category',
        boundaryGap: true,
        axisLine: { // 坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: '#4FC7FF'
          }
        },
        axisLabel: { // 坐标轴刻度标签的相关设置
          textStyle: {
            color: '#A0C8DB',
            // margin: 15 * scale,
            fontSize: 20 * scale
          }
        },
        axisTick: {
          show: false
        },
        data: ['19/11/24', '19/11/25', '19/11/26', '19/11/27', '19/11/28', '19/11/29', '19/11/30']
      }],
      yAxis: [{
        type: 'value',
        min: 0,
        splitLine: {
          show: false
        },
        splitNumber: 5,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#4FC7FF'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#A0C8DB',
            fontSize: 20 * scale
          }
        },
        axisTick: {
          show: true
        }
      }],
      series: [{
        name: '蒸汽',
        type: 'line',
        smooth: true, // 是否平滑曲线显示
        showAllSymbol: true,
        symbol: 'circle',
        connectNulls: true,
        lineStyle: {
          normal: {
            color: '#FFFD9B' // 线条颜色
          },
          borderColor: '#f0f'
        },
        itemStyle: {
          normal: {
            color: '#FFFD9B'
          }
        },
        tooltip: {
          show: false
        },
        areaStyle: null,
        data: [100, 192, 310, 135, 380, 157, 360]
      }, {
        name: '负荷',
        type: 'bar',
        barWidth: 10 * scale,
        tooltip: {
          show: false
        },
        label: {
          show: false,
          position: 'top',
          textStyle: {
            color: '#fff'
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
              [{
                offset: 0,
                color: '#4FC7FF'
              },
              {
                offset: 1,
                color: '#126CC0'
              }
              ])

          }
        },
        data: [400, 250, 420, 310, 450, 400, 380]
      }]
    }

    myChart.setOption(option)

    window.addEventListener('resize', () => {
      myChart.resize()
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
